<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>客服</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style></style>
</head>

<body>
    <div class="app" v-cloak>
        <header>
            <div class="flex-x-sb">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="title">
                    {{title}}<span v-if="progress">(已加载{{progress}}%)</span>
                </div>
            </div>
        </header>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script>
        apiready = function() {
            vm = new Vue({
                el: '.app',
                data: {
                    title: '在线客服',
                    progress: ''
                },
                created() {
                    const vm = this;
                    api.setFrameClient({
                        frameName: 'IM_frm'
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.state == 1) {
                                vm.progress = ret.progress;
                            } else if (ret.state == 2) {
                                vm.progress = '';
                            }
                        }
                    });
                },
                mounted() {
                  var header = $api.dom('header');
                  var headerH = $api.fixStatusBar(header);
                  api.openFrame({
                    name: 'IM_frm',
                    url: api.pageParam.kfUrl,
                    rect: {
                      marginTop: headerH,
                      marginBottom: 0,
                      w: 'auto'
                    },
                    pageParam: api.pageParam
                  });
                },
                methods: {
                    back() {
                        api.closeWin();
                    }
                },
            })
        }
    </script>
</body>

</html>
